<template>
    <view class="page" :style="'background: url(' + getCloudImg('common2/consume-bg.png') + ') no-repeat; background-size: 100% 100%;'">
        <view class="content">
            <view class="primary text-19 text-bold text-center pb-32">请选择核销方式</view>
            <view class="px-16">
                <view class="menu-item" @click="scanCode">
                    <view class="primary text-19 flex align-center">
                        <image src="@/assets/img/consume/scan.png" class="w-24 h-24 mr-12"></image>
                        扫码核销
                    </view>
                    <image src="@/assets/img/consume/scan-img.png" style="width: 200rpx; height: 200rpx"></image>
                </view>
                <view class="menu-item" @click="routerPush('/pages/consume/code')">
                    <view class="primary text-19 flex align-center">
                        <image src="@/assets/img/consume/ticket.png" class="w-24 h-24 mr-12"></image>
                        票码核销
                    </view>
                    <image src="@/assets/img/consume/ticket-img.png" style="width: 200rpx; height: 200rpx"></image>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { isEmpty, routerPush, toast, getCloudImg } from '@/assets/js/utils'

import { getDetailByConsumeCode } from '@/service/consume'

onShow(() => {
    init()
})

//初始化页面参数
const init = async () => {}

//输入券码核销
const handleConsumeCode = async (codeNumber: number | string) => {
    if (!isEmpty(codeNumber)) {
        uni.showLoading({
            mask: true
        })
        uni.hideLoading()
        let [result, err] = await getDetailByConsumeCode({ subcodeCode: codeNumber })
        if (isEmpty(result.detail)) {
            toast(result.resultNote)
        } else {
            routerPush(`/pages/consume/detail?code=${codeNumber}`)
        }
    }
}
//扫码核销
const scanCode = () => {
    uni.scanCode({
        success: function (res) {
            handleConsumeCode(res.result)
        }
    })
}
</script>

<style>
.page {
    min-height: 100vh;
}

.content {
    padding-top: 18vh;
}

.menu-item {
    background: #ffffff;
    border-radius: 12rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24rpx 80rpx;
    margin-bottom: 40rpx;
}
</style>
